// 辅助函数：检查元素是否在视口中
function isElementInViewport(el, offset = 0.8) {
    // 获取元素的边界框
    const rect = el.getBoundingClientRect();
    return (
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) * offset &&
        rect.bottom >= 0
    );
}

// 初始化滚动动画
function initScrollAnimations() {
    const animatedElements = document.querySelectorAll('[class*="animate-"]'); // 选择所有包含 animate- 的元素

    const handleScrollAnimation = () => {
        animatedElements.forEach((el) => {
            if (isElementInViewport(el)) {
                el.classList.add('active');
            } else {
                el.classList.remove('active'); // 可选：离开视口时移除 active
            }
        });
    };

    // 初始化检查
    handleScrollAnimation();

    // 滚动事件监听
    window.addEventListener('scroll', handleScrollAnimation);
}

// 初始化页面加载动画
function initPageLoader() {
    const pageLoader = document.createElement('div');
    pageLoader.className = 'page-loader';
    pageLoader.innerHTML = '<div class="loader"></div>';
    document.body.appendChild(pageLoader);

    pageLoader.classList.add('active');

    window.addEventListener('load', () => {
        setTimeout(() => {
            pageLoader.classList.add('fade-out');
            setTimeout(() => {
                pageLoader.style.display = 'none';
            }, 500); // 匹配 CSS 过渡时间
        }, 0);
    });
}

// 初始化滚动进度条
function initScrollProgress() {
    const scrollProgress = document.createElement('div');
    scrollProgress.className = 'scroll-progress';
    document.body.appendChild(scrollProgress);

    window.addEventListener('scroll', () => {
        const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = (window.scrollY / windowHeight) * 100;
        scrollProgress.style.width = `${scrolled}%`;
    });
}

// 滚动到指定距离样式修改
const scrollFn = () => {
    window.addEventListener("scroll", function () {
      // 获取当前滚动距离
      const scrollTop = document.documentElement.scrollTop;
      // 假设当用户滚动超过500像素时更改背景颜色
      const header = document.querySelector(".header");
      if (scrollTop > 100) {
        // 改变背景色
        if(header)header.classList.add("header-bg");
      } else {
        if(header)header.classList.remove("header-bg");
      }
    });
  };

// 初始化所有功能
function initAll() {
    initScrollAnimations();
    // initPageLoader();
    initScrollProgress();
    scrollFn()
}